:root{
  --backgroundColor1: rgb(187, 61, 236);
  --backgroundColor2: rgb(70, 147, 230);
  --backgroundColorOpacity1: rgba(210, 95, 252, 0.2);
  --backgroundColorOpacity2: rgba(85, 162, 250, 0.2);
  --sectionBgColor1: rgb(137, 20, 184);
  --sectionBgColor2: rgb(9, 94, 151);
  --accentColor1: rgb(195, 0, 255);
  --accentColor2: rgb(0, 195, 255);
  --shadowColor1: rgb(162, 0, 255);
  --shadowColor2: rgb(0, 140, 255);
  --footerColor: rgb(29, 98, 172);
}
.headerStyles{
  text-align: center;
  background-color: var(--sectionBgColor2);
  padding: 5px;
  text-decoration: underline var(--accentColor1);
}



body{
  /*background-image:url("/images/background.png");
  background-attachment:fixed;
  background-size:cover;
  background-repeat: no-repeat;
  */
  background: linear-gradient(to bottom, var(--backgroundColor1), var(--backgroundColor2));
  background-attachment:fixed;;
  color: white;
  font-family: Verdana;
  margin: 0%;
}
.sectionStyle{
  margin: 5%;
  margin-inline: 25%;
  margin-block: 50px;
  border: 5px solid var(--accentColor1);
  background-color: var(--backgroundColor1);
  h1{
    border: 5px solid var(--accentColor1);
    background-color: var(--sectionBgColor1);
    padding: 10px;
    margin: -5px;
    font-size: 1.2em;
  }
  p{
    padding: 10px;

  }
  box-shadow: 5px 5px var(--shadowColor2);
}
.sectionStyle2{
  margin: 5%;
  margin-inline: 25%;
  margin-block: 50px;
  border: 5px solid var(--accentColor2);
  background-color: var(--backgroundColor2);
  h1{
    border: 5px solid var(--accentColor2);
    background-color: var(--sectionBgColor2);
    padding: 10px;
    margin: -5px;
    font-size: 1.2em;
  }
  p{
    padding: 10px;
  }
  box-shadow: 5px 5px var(--shadowColor1);
}

/* --- NAV RELATED STYLES ---*/
nav{
  text-align: center;
  background-color: var(--sectionBgColor1);
  margin-block: 15px;
  padding: 10px;
}

nav ul{
  list-style-type: none;
  padding-left: 0;
}
nav li{
  padding: 5px;
}
nav a{
  color: white;
  text-decoration: none;
  padding: 15px;
}
/*--- FOOTER STYLES ---*/
footer{
  padding: 10px;
  padding-top: 10%;
  padding-bottom: 0;
  background-color: var(--backgroundColor2);
  background: linear-gradient(to bottom, var(--backgroundColorOpacity2), var(--backgroundColor2));
  margin: 0%;
  text-align: center;
}
footer nav{
  background: none;
  margin: 0;
  padding: 5px;
}
footer li{
  padding: 10px;
}
footer nav ul{
  margin: 0%;
}
.footerSection{
  background-color: var(--footerColor);
  border: 5px solid var(--accentColor2);
}
.footerSection p:nth-of-type(1){
  padding-top: 20px;
}